<template>
    <div class="demo">
        <h2>基础使用</h2>
        <p>基本使用只需要使用VisTopo标签，并且传递点和线数据即可，由于该组件默认的点类型为image，所以可以看到点都是展示为一个红色的定位图标</p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <ClientOnly>
                    <VisTopo :edges="edges" :nodes="nodes" />
                </ClientOnly>
            </div>
            <div class="code-content" style="height: 0">
                <div class="code-content-height">
                    <pre><code class="vue">{{ codeStr }}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(0)" ref="EchartMapBase">
                <i :class="isShow[0] === false ? 'el-icon-arrow-down icon-down' : 'el-icon-arrow-up icon-down'"></i>
                <span class="lock-code-word">{{
                    isShow[0] === false ? "显示代码" : "隐藏代码"
                }}</span>
            </div>
        </div>

        <h2>更换点的图片</h2>
        <p>在nodes当中规定了当如果传入了image，将会使用入参的image图片替换默认图片</p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <ClientOnly>
                    <VisTopo v-if="showImageNode" :edges="edges" :nodes="ImageNodes" />
                </ClientOnly>
            </div>
            <div class="code-content" style="height: 0">
                <div class="code-content-height">
                    <pre><code class="vue">{{ codeStr1 }}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(1)" ref="EchartMapBase">
                <i :class="isShow[1] === false ? 'el-icon-arrow-down icon-down' : 'el-icon-arrow-up icon-down'"></i>
                <span class="lock-code-word">{{
                    isShow[1] === false ? "显示代码" : "隐藏代码"
                }}</span>
            </div>
        </div>
    </div>
</template>
<script>
// import iconA from './public/img/iconA'
import VisData from "./public/vistopo";
import mixin from "../mixin";
export default {
    name: "VisTopoBase",
    mixins: [mixin],
    data() {
        return {
            codeStr: `
            <VisTopo :edges="edges" :nodes="nodes" />

            edges: [],
            nodes: [],
            this.nodes.push(
                {
                    id: i,
                    x: Math.floor(Math.random() * 1200),
                    y: Math.floor(Math.random() * 400),
                    label: "label" + i,
                },
            )
            this.edges.push(
                {
                    id: i,
                    from: Math.floor(Math.random() * 30),
                    to: Math.floor(Math.random() * 30),
                }
            )`,
            edges: [
            ],
            nodes: [
            ],
            ImageNodes:[],
            showImageNode:false
        }
    },
    methods: {
        baseData() {
            for (let i = 0; i < 30; i++) {
                this.nodes.push(
                    {
                        id: i,
                        x: Math.floor(Math.random() * 1200),
                        y: Math.floor(Math.random() * 400),
                        label: "label" + i,
                    },
                )
                this.edges.push(
                    {
                        id: i,
                        from: Math.floor(Math.random() * 30),
                        to: Math.floor(Math.random() * 30),
                    }
                )
            }
        },
        imageNodeData(){
            for (let i = 0; i < 30; i++) {
                this.ImageNodes.push(
                    {
                        id: i,
                        x: Math.floor(Math.random() * 1200),
                        y: Math.floor(Math.random() * 400),
                        label: "label" + i,
                        // image: iconA
                    },
                )
            }
        }
    },
    mounted() {
        this.baseData()
        this.imageNodeData()
        this.$nextTick(()=>{
            this.showImageNode = true
        })
    }
}
</script>